<template>
  <div>
    <!-- 作品/收藏/问答 -->
    <van-nav-bar>
      <template #left>
        <van-icon
          name="arrow-left"
          color="#FF8800"
          size="20"
          @click="onClickLeft()"
        />
      </template>
      <!-- 标签栏 -->

      <template #right>
        <div class="button" @click="check()">
          <button>发布</button>
        </div>
      </template>
    </van-nav-bar>
    <div id="box">
      <van-tabs
        v-model="activeName"
        sticky
        title-active-color="#FF7F24"
        title-inactive-color="#BEBEBE"
        color="#FF7F24"
      >
        <van-tab title="作品" name="edit">
          <div class="spamtext" v-for="{ sp, wd, zp, id } in data" :key="id">
            <span>{{ sp }}</span>
            <span>{{ wd }}</span>
            <span>{{ zp }}</span>
          </div>
        </van-tab>
        <van-tab title="食谱" name="recipe">
          <div class="spamtext" v-for="{ sp, wd, zp, id } in data" :key="id">
            <span>{{ sp }}</span>
            <span>{{ wd }}</span>
            <span>{{ zp }}</span>
          </div>
        </van-tab>
        <van-tab title="问答" name="questions">
          <div class="spamtext" v-for="{ sp, wd, zp, id } in data" :key="id">
            <span>{{ sp }}</span>
            <span>{{ wd }}</span>
            <span>{{ zp }}</span>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "",
      data: [{ zp: "0个作品", sp: "0个食谱", wd: "0个问答" }],
      data: "",
    };
  },
  // props:[activeName],
  methods: {
    onClickLeft() {
      return this.$router.go(-1);
    },
    check() {
      return this.$router.push("/" + this.activeName);
    },
  },
  mounted() {
    this.activeName = this.$route.params.activeName;
  },
  watch: {
    activeName(r, e) {
      // console.log(r);
      // console.log(this.data);
    },
  },
};
</script>

<style lang="scss" scoped>
button {
  //边框清掉
  border: 0;
  outline: none;
  //背景颜色清掉
  background-color: transparent;
}
.button {
  background-color: #ffffff;
  color: #e98b71;
  border: 1px solid;
  border-top-color: currentcolor;
  border-right-color: currentcolor;
  border-bottom-color: currentcolor;
  border-left-color: currentcolor;
  border-color: #e98b71;
  border-radius: 4px;
}
.button:active {
  background-color: #e98b71;
  color: #ffffff;
}

.spamtext {
  padding: 5px;
  text-align: center;
  margin: 10px auto;
  font-size: 12px;
  color: #999999;
  line-height: 20px;
  text-align: center;
}
</style>
